<template>
	<view class="container  box">
		<view class="head">
			<block v-for='(item,index) in headSet'>
				<view :class="index==headIndex?'head-item-active':'head-item'" @click="headIndex=index">
					{{item}}
				</view>
			</block>
		</view>
		<view class="train " v-if='headIndex==0'>
			<view class="title">
				运动记录
			</view>
			<view class="train-content box-shadow">
				<timeSelect :timeType='timeType' @selectFn="selectType"></timeSelect>
				<uni-datetime-picker :clear-icon="false" v-model="timeTrain" type="date" class="timePicker"
					@change="changeData "></uni-datetime-picker>
				<view class="charts-box" v-if="isShow">
					<qiun-data-charts type="pie" :opts="trainOpts" :chartData="trainData" />
				</view>
				<view class="charts-box-txt" v-else>
					暂无数据
				</view>
			</view>
		</view>
		<view class="health" v-if='headIndex==1'>
			<view class="title">
				体重-身高
			</view>
			<view class="health-content box-shadow">
				<timeSelect :timeType='timeType' @selectFn="selectType"></timeSelect>
				<uni-datetime-picker :clear-icon="false" v-model="timeHealth" type="date" class="timePicker"
					@change="changeData "></uni-datetime-picker>
				<view class="charts-box">
					<qiun-data-charts type="area" :opts="healthOpts" :chartData="healthData" />
				</view>
			</view>
		</view>

	</view>
</template>

<script>
	import timeSelect from '../../../components/timeSelect.vue'
	import {
		getTrainDatas,
		getHealthDatas,
		tranformDateTime,
		remove
	} from '../../../database/index.js'
	export default {
		components: {
			timeSelect
		},
		data() {
			return {
				isShow: false,
				timeTrain: new Date().toLocaleDateString().split('T')[0].replace(/\//g, '-'),
				timeType: 0,
				timeHealth: new Date().toLocaleDateString().split('T')[0].replace(/\//g, '-'),
				trainData: {},
				headIndex: 0,
				headSet: ['运动统计', '健康统计'],
				healthData: {},
				columns: '',
				trainOpts: {
					color: ["#1890FF", "#91CB74", "#FAC858", "#EE6666", "#73C0DE", "#3CA272", "#FC8452", "#9A60B4",
						"#ea7ccc"
					],
					padding: [5, 5, 5, 5],
					enableScroll: false,
					extra: {
						pie: {
							activeOpacity: 0.5,
							activeRadius: 10,
							offsetAngle: 0,
							labelWidth: 15,
							border: true,
							borderWidth: 3,
							borderColor: "#FFFFFF",
							linearType: "custom"
						}
					}
				},
				healthOpts: {
					color: ["#1890FF", "#91CB74", "#FAC858", "#EE6666", "#73C0DE", "#3CA272", "#FC8452", "#9A60B4",
						"#ea7ccc"
					],
					padding: [15, 15, 0, 15],
					enableScroll: false,
					legend: {},
					xAxis: {
						disableGrid: true,
						rotateLabel: true,
						marginTop: 12
					},
					yAxis: {
						gridType: "dash",
						dashLength: 2
					},
					extra: {
						area: {
							type: "curve",
							opacity: 0.2,
							addLine: true,
							width: 2,
							gradient: true,
							activeType: "hollow"
						}
					}
				},
			}
		},
		async onReady() {
			uni.showLoading({
				title: '加载中'
			})
			await this.getHealth(this.timeType, this.timeHealth)
			await this.getTrain(this.timeType, this.timeTrain)
		},
		async onPullDownRefresh() {
			uni.showLoading({
				title: '加载中'
			})
			await this.getHealth(this.timeType, this.timeHealth)
			await this.getTrain(this.timeType, this.timeTrain)
		},
		methods: {
			changeData() {
				uni.hideLoading()
				uni.showLoading({
					title: '加载中'
				})
				this.getTrain(this.timeType, this.timeTrain)
				this.getHealth(this.timeType, this.timeHealth)
			},
			async selectType(data) {
				uni.hideLoading()
				this.timeType = data
				uni.showLoading({
					title: '加载中'
				})
				await this.getTrain(this.timeType, this.timeTrain)
				await this.getHealth(this.timeType, this.timeHealth)
			},
			async getTrain(timeType, start) {
				let datas = await getTrainDatas(timeType, tranformDateTime(new Date(start)
					.toLocaleDateString()))
				if (datas.length > 0) {
					this.isShow = true
				} else {
					this.isShow = false
				}

				let res = {
					series: []
				}
				res.series = [{
					data: datas
				}]
				this.trainData = JSON.parse(JSON.stringify(res))
				uni.hideLoading()
			},
			async getHealth(timeType, start) {
				let [date, weighs, heights] = await getHealthDatas(timeType, tranformDateTime(new Date(start)
					.toLocaleDateString()))
				let res = {
					categories: date,
					series: [{
							name: "体重",
							data: weighs
						},
						{
							name: "身高",
							data: heights
						}
					]
				}
				this.healthData = JSON.parse(JSON.stringify(res))
				uni.hideLoading()
			},
		}
	}
</script>


<style lang="scss" scoped>
	.detail {
		flex: 1;
		height: 1px;

		.item-details {
			color: black;
			display: flex;
			flex-direction: row;
			justify-content: space-between;
			margin-bottom: 10rpx;

			&:last-child {
				margin-bottom: 0;
			}

			.detail-item {
				text-align: center;
				padding: 20rpx 0;
				width: 300rpx;
				border-radius: 10rpx;
				background-color: white;
				display: flex;
				position: relative;
				flex-direction: column;

				.del-train {
					position: absolute;
					top: 10rpx;
					right: 10rpx;
				}

				.train-name,
				.train-calories {
					margin-bottom: 10rpx;
				}
			}
		}

	}

	.common-content {
		margin-top: 15rpx;
		padding: 10rpx;
		background-color: white;
	}

	.timePicker {
		margin: 10rpx;
	}

	.head {
		display: flex;
		margin-bottom: 10rpx;

		.head-item {
			color: #D3D3D3;
			padding: 20rpx 0;
			flex: 1;
			text-align: center;
		}

		.head-item-active {
			@extend .head-item;
			background-color: #fff;
			color: black;
		}
	}

	.charts-box {
		margin: 10rpx;
		width: 100%;
		height: 300px;
	}

	.charts-box-txt {
		@extend .charts-box;
		display: grid;
		place-items: center;
		font-size: 1.2rem;
		letter-spacing: 0.1rem;
		color: $global_text;
	}

	.box-shadow {
		-webkit-box-shadow: 0 2rpx 2rpx 5rpx #dedede;
	}

	.box {
		padding-top: 5rpx;
		display: flex;
		flex-direction: column;

		.train {
			color: black;

			.train-content {
				@extend .common-content;
			}

			margin-bottom: 20rpx;
		}

		.health {
			color: black;

			.health-content {
				@extend .common-content;
			}
		}


	}
</style>